<template>
  <form method="POST" action="http://localhost:8080/upload" enctype="multipart/form-data">
    <div class="imgaa">
      <img src="1.png" alt="">
    </div>
    <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
    <center>
      <!--    <div class="container justify-content-center">-->
      <span class="bit">登录</span>
      <!--    </div>-->
    </center>
    <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
    <div class="wqerd">
      <a href="javascript:" @click="change=false">
        用户名登录
      </a>
    </div>
    <div class="qweqe">
      <a href="javascript:" @click="change=true">
        邮箱登录
      </a>
    </div>
    <div class="">
      <div class="adc">
        <div class="input-group mb-3 cvb" v-if="!change">
          <input type="text" class="form-control" placeholder="昵称" aria-label="Username" v-model="user_bind.name" required>
        </div>
        <div class="input-group mb-3 cvb" v-if="change">
          <input type="email" class="form-control" placeholder="email" aria-label="Email" v-model="user_bind.email" required>
        </div>
        <div class="input-group mb-3 cvb">
          <input type="password" class="form-control" placeholder="密码(6到16个字符组成，区分大小写)" aria-label="Password" v-model="user_bind.pwd" id="p" required>
        </div>
        <div class="cvb">
          <button type="button" class="btn btn-lg btn-primary" style="width: 40%"><a href="javascript:" @click="login">登录</a>
          </button>
        </div>
        <div class="cvbd">
          <button type="button" class="btn btn-lg btn-primary" style="width: 110%"><a href="javascript:"
                                                                                      @click="changeComponent(Register)">注册</a>
          </button>
        </div>
      </div>
    </div>
  </form>
</template>

<script setup lang="ts">
import Register from "@/components/Register.vue"
import {inject, reactive, ref, watch,toRefs} from "vue";
import request from "@/hooks/request";
import Home from "@/components/Home.vue";

const changeComponent = inject('changeComponent')
const change = ref(false)
const uuid=inject("uuid")

const user =()=> {
  return {name: null, pwd: '', email: null}
}
let user_bind=ref(user())
watch(change,()=>{
  console.log(user_bind)

  console.log('ok')
  user_bind.value=user()
  console.log(user_bind.value)
})
const login = function () {
  if (!document.forms[1].reportValidity()){

    return
  }
  request.post('user/login_f', user_bind.value)
  .then(re=>{
    if (re.obj){
      uuid.value=re.obj.uuid
      changeComponent(Home)
    }
    else
    {
      alert("用户名或密码错误")
    }
  })
}
</script>

<style scoped>
.imgaa {
  margin-left: 20%;
}

.bit {
  font-size: 38px;
  font-weight: bold;
  /*margin-left: 48%;*/
  margin-top: 500px;
}

a {
  text-decoration: none
}

a:link {
  color: #3C3C3C;
  text-decoration: none;
}

a:visited {
  color: #0000FF;
  text-decoration: none;
}

a:hover {
  color: #FF00FF;
  text-decoration: none;
}

a:active {
  color: #D200D2;
  text-decoration: none;
}

.wqerd {
  font-size: 22px;
  margin-left: 38%;
}

.qweqe {
  font-size: 22px;
  margin-left: 57%;
  margin-top: -31px;
}

.adc {
  padding-top: 40px;
  margin-left: 40%;
  margin-right: 40%;
}

.cvb {
  padding-top: 50px;
}

.cvbd {
  padding-top: 50px;
  margin-top: -98px;
  margin-left: 62%;
}


</style>